<template>
    <!-- 歌曲分类 -->
    <div id="inClassify">
        <Nav></Nav>
        <div class="classify">
            <router-link :to="{path:'/songClassify',query:{classify:'伤感'}}" class="col">伤感</router-link>|
            <router-link :to="{path:'/songClassify',query:{classify:'宣泄'}}" class="col">宣泄</router-link>|
            <router-link :to="{path:'/songClassify',query:{classify:'开心'}}" class="col">开心</router-link>|
            <router-link :to="{path:'/songClassify',query:{classify:'快乐'}}" class="col">快乐</router-link>|
            <router-link :to="{path:'/songClassify',query:{classify:'安静'}}" class="col">安静</router-link>|
            <router-link :to="{path:'/songClassify',query:{classify:'励志'}}" class="col">励志</router-link>|
            <router-link :to="{path:'/songClassify',query:{classify:'治愈'}}" class="col">治愈</router-link>|
            <router-link :to="{path:'/songClassify',query:{classify:'思念'}}" class="col">思念</router-link>|
            <router-link :to="{path:'/songClassify',query:{classify:'甜蜜'}}" class="col">甜蜜</router-link>|
            <router-link :to="{path:'/songClassify',query:{classify:'寂寞'}}" class="col">寂寞</router-link>
        </div>
        <router-view :c="classify"></router-view>
        <Footer></Footer>
    </div>
</template>

<script>
import Nav from "../components/nav.vue";
import Footer from "../components/footer.vue";
export default {
    data() {
        return {
            classify:"伤感"
        }
    },
    components: {
        Nav,
        Footer
    },
    methods: {
    },
    created:function(){
        
    }
};
</script>

<style>
#inClassify {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#inClassify .classify{
    margin-top: 20px;
    
}

#inClassify .classify .col:hover{
    color: plum;
}

#inClassify .classify .col{
    text-decoration: none;
}
</style>